<template>
	<view class="userinfo">
		<view v-if="showHeader" class="status" :style="{ position: headerPosition, top: statusTop }"></view>
		<!-- <view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}">
			<view class="addr"></view>
			<view class="input-box">
				
			</view>
			<view class="icon-btn">
				<view class="icon tongzhi" @tap="toMsg"></view>
				<view class="icon setting" @tap="toSetting"></view>
			</view>
		</view> -->
		<!-- 占位 -->
		<view v-if="showHeader" class="place" :style="{ background: colors.color }"></view>
		<!-- 用户信息 -->
		<view class="user" :style="{ background: colors.color }">
			<!-- 头像 -->
			<view class="left">
				<image :src="userData.head_img" @tap="toSetting" v-if="userData.head_img"></image>
				<image src="../../../static/img/face.jpg" @tap="toSetting" v-else></image>
			</view>
			<!-- 昵称,个性签名 -->
			<view class="right">
				<view class="username" v-if="userData.username">{{ userData.username}}</view>
				<view class="username" v-else-if="mytel && mytel!== ''">{{ mytel}}</view>
				<view class="username" @tap="toLogin" v-else>登录</view>
				<!-- <view class="signature">{{user.signature}}</view> -->
			</view>
			<view class="moneys">
				<view class="left">
					<p class="p1">¥{{ userData.money || 0 }}</p>
					<p class="p2">余额</p>
				</view>
				<view class="right" @tap="onCash"><p>提现</p></view>
			</view>
		</view>
		<!-- 订单-余额 -->
		<view class="order">
			<!-- 订单类型 -->
			<p class="all_order" @tap="jumpOrder">
				全部订单
				<image src="../../../static/img/right.png" mode=""></image>
			</p>
			<view class="list">
				<view class="box" v-for="(row, index) in orderList" :key="index" @tap="toOrderList(row)">
					<view class="img">
						<image :src="row.icon" mode=""></image>
						<!-- <text class="status_text" v-if="orderStatus.status_0_num && orderStatus.status_0_num !== 0 && row.id == 0">{{orderStatus.status_0_num}}</text>
						<text class="status_text" v-if="orderStatus.status_1_2_num &&orderStatus.status_1_2_num !== 0 && row.id == 2">{{orderStatus.status_1_2_num}}</text>
						<text class="status_text" v-if="orderStatus.status_team_num &&orderStatus.status_team_num !== 0 && row.id == 1">{{orderStatus.status_team_num}}</text>
						<text class="status_text" v-if="orderStatus.after_num &&orderStatus.after_num !== 0 && row.id == 5">{{orderStatus.after_num}}</text> -->
					</view>
					<view class="text">{{ row.text }}</view>
				</view>
			</view>
		</view>
		<!-- 优惠券和二维码区域 -->
		<view class="youhui_cell">
			<image src="../../../static/img/youhuiquan.png" mode="" class="img1"></image>
			<text>我的优惠券</text>
			<p @tap="jumpcoupon">
				<!-- <text>12</text> -->
				<image src="../../../static/img/right.png" mode=""></image>
			</p>
		</view>
		<view class="my_ewm">
			<image src="../../../static/img/kuang.png" mode="" class="kuang"></image>
			<image :src="ewmimg" mode="" class="ewm"></image>
			<p class="ewm_title">取货二维码</p>
		</view>
		<!-- 工具栏 -->
		<view class="toolbar">
			<view class="title">常用工具</view>
			<view class="list">
				<view class="box" v-for="(row, index) in mytoolbarList" :key="index" @tap="toPage(row)">
					<view class="img"><image :src="row.img"></image></view>
					<view class="text">{{ row.text }}</view>
				</view>
			</view>
		</view>
		<view class="introduce">
			<text class="left">——</text>
			<text class="name" @click="jumpHaoyang">好样软件</text>
			<text>提供技术支持</text>
			<text class="right">——</text>
		</view>
		<!-- 占位 -->
		<view class="fiex_Tel" :style="{ background: colors.color }">
			<image src="../../../static/img/user/tel.png" mode=""></image>
			<text @tap="callTel">联系服务点</text>
		</view>
		<!-- <view class="place-bottom"></view> -->
	</view>
</template>
<script>
import { getUserInfo, getToken, getColorCofig,removeToken,setUserInfo,setTel } from '../../../static/utils/ahth.js';
import QR from '@/static/utils/wxqrcode.js';
export default {
	data() {
		return {
			isfirst: true,
			colors: {},
			mytel:null,
			headerPosition: 'fixed',
			headerTop: null,
			statusTop: null,
			ewmimg:'',
			location:{},
			showHeader: true,
			//个人信息,
			level: 3, //用户等级
			userData: {},
			orderStatus:{},//订单数
			// 订单类型
			orderList: [
				{ text: '待付款',id:'0', icon: '/static/img/user/dengdai.png' },
				{ text: '未成团',id:'1', icon: '/static/img/user/wct.png' },
				
				{ text: '配送中',id:'2', icon: '/static/img/user/tihuo.png' },
				{ text: '已完成',id:'3', icon: '/static/img/user/beihuo.png' },
				{ text: '售后服务',id:'4', icon: '/static/img/user/shouhou.png' }
			],
			// 工具栏列表
			mytoolbarList: [
				// { url: '/pagesA/pages/user/recommend',id: 1, text: '推荐有奖', img: '/static/img/user/youjiang.png', level: false },
				{ url: '/pagesA/pages/user/applyMaster',id: 2, text: '网格长', img: '/static/img/user/tuanzhang.png', level: true, name: 'applyMaster' },
				{ url: '/pagesA/pages/user/pickUp',id: 3, text: '服务点', img: '/static/img/user/shenqing.png', level: true, name: 'pickUp' },
				// { url: '/pages/user/address/address', text: '收货地址', img: '/static/img/user/dizhi.png', level: false },
				{ url: '/pagesA/pages/user/consultation',id: 4, text: '在线电话', img: '/static/img/user/dianhua.png', level: false },
				// { url: '/pagesA/pages/orchard/index',id: 5, text: '我的果园', img: '/static/img/user/guoyuan1.png', level: false },
				{ url: '/pages/user/setting/setting',id: 6, text: '设置', img: '/static/img/user/shezhi.png', level: false }
			]
		};
	},
	//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
		this.headerTop = e.scrollTop >= 0 ? null : 0;
		this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
	},
	onLoad() {
		this.statusHeight = 0;
		// #ifdef APP-PLUS
		this.showHeader = false;
		this.statusHeight = plus.navigator.getStatusbarHeight();
		// #endif
	},
	onShow() {
		this.colors = getColorCofig();
		console.log('重新获取的颜色', this.colors);
		this.changeTabBar();
		this.getUserData();
	},
	methods: {
		//消息列表
		toMsg() {
			this.$Router.push({
				path: '/pages/msg/msg'
			});
		},
		changeTabBar() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.colors.color,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			});
		},
		callTel() {
			if(!this.location.mobile || this.location.mobile == ''){
				uni.showToast({
					title:'请选择提货点!',
					icon:'none'
				})
				return
			}
			//联系提货点
			uni.makePhoneCall({
				phoneNumber: this.location.mobile
			});
		},
		getdefault(id){//获取用户默认的提货点
			this.request('user/getGoodsPointLeaderInfo', {
				type: 1,
				type_id: id
			}).then(res => {
				console.log(res)
				this.location = res.data
			});
		},
		jumpHaoyang() {
			//跳转到好样官网
			this.$Router.push({
				path: '/pagesA/pages/user/links',
				query: {
					url: 'https://www.haoyangsoft.com'
				}
			});
		},
		toOrderList(row) {
			uni.setStorageSync('tbIndex', row.id);
			// console.log(row.id,);
			let refund = ''
			if(row.id == 4){//售后服务
				refund = 1
			}
			this.$Router.push({
				path: '/pages/user/order_list/order_list',
				query: {
					tbIndex: row.id,
					refund: refund
				}
			});
		},
		jumpOrder() {
			uni.setStorageSync('tbIndex', -1);
			this.$Router.push({
				path: '/pages/user/order_list/order_list',
				query: {
					tbIndex: -1
				}
			});
		},
		toSetting() {
			if (getToken() !== '') {
				this.$Router.push({
					path: '/pages/user/setting/setting'
				});
			} else {
				this.$Router.push({
					path: '/pages/login/login'
				});
			}
		},
		toMyQR() {
			this.$Router.push({
				path: '/pages/user/myQR/myQR'
			});
		},
		toLogin() {
			if (!this.userData.username || getToken() == '') {
				this.$Router.push({
					path: '/pages/login/login'
				});
				this.isfirst = false;
			} else {
				return;
			}
		},
		isLogin() {
			//实际应用中,用户登录状态应该用token等方法去维持登录状态.
			const value = uni.getStorageSync('UserInfo');
			if (value) {
				return true;
			}
			return false;
		},
		toDeposit() {
			this.$Router.push({
				path: '/pages/user/deposit/deposit'
			});
		},
		toPage(value) {
			if (!value.url) {
				uni.showToast({ title: '模板未包含此页面', icon: 'none' });
				return;
			}
			if(getToken() == ''){
				this.$Router.push({
					path: '/pages/login/login'
				});
				return
			}
			// if(value.id == 5){
			// 	uni.showToast({ title: '功能开发中~', icon: 'none' });
			// 	return;
			// }
			console.log(value);
			if (value.level == true) {
				//需要用户等级的页面
				if (this.userData.is_leader == 0 && value.name == 'applyMaster') {
					//如果用户不是服务点跳到网格格长格长
					this.$Router.push({
						path: value.url
					});
				} else if (this.userData.is_leader == 1 && value.name == 'applyMaster') {
					//如果用户等级是服务点跳网格格长格长中心
					this.$Router.push({
						path: '/pagesA/pages/other/master'
					});
				}
				if (this.userData.is_goods_point == 0 && value.name == 'pickUp') {
					this.$Router.push({
						path: value.url
					});
				} else if (this.userData.is_goods_point == 1 && value.name == 'pickUp') {
					this.$Router.push({
						path: '/pagesA/pages/other/place'
					});
				}
				return;
			}
			this.$Router.push({
				path: value.url
			});
		},
		jumpcoupon() {
			//优惠券
			this.$Router.push({ path: '/pages/user/coupon/coupon' });
		},
		onCash() {
			//提现
			this.$Router.push({ path: '/pagesA/pages/user/withdrawal' });
		},
		getUserData() {
			//获取个人信息
			this.request('user/getUserInfo', {}).then(res => {
				console.log(res);
				if(res.code == 200){
					this.userData = res.data;
					this.mytel = setTel(res.data.mobile)
					this.getdefault(res.data.goods_point_id)
					setUserInfo(res.data);
					
				}else if(res.code == 400){
					this.userData = {}
					this.mytel = ''
					removeToken()
				}
				this.getOrderData()
				let uid = String(res.data.user_id) || 0
				let img = QR.createQrCodeImg(uid, {
					size: parseInt(200) //二维码大小
				});
				console.log(img)
				this.ewmimg = img;
			});
		},
		getOrderData(){//获取订单数
			this.request('order/getOrderNum',{})
			.then(res=>{
				console.log(res)
				this.orderStatus = res.data
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.userinfo {
	position: relative;
	background-color: #fff;
	padding-bottom: 20upx;
}
page {
	position: relative;
	background-color: #fff;
}
.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	// background-color: #f06c7a;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
}

.header {
	width: 92%;
	padding: 0 4%;
	height: 100upx;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #f06c7a;
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */
	.icon-btn {
		width: 120upx;
		height: 60upx;
		flex-shrink: 0;
		display: flex;
		.icon {
			color: #fff;
			width: 60upx;
			height: 60upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 42upx;
		}
	}
}
.place {
	background-color: #f23a3a;
	height: 50upx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}
.place-bottom {
	height: 100upx;
}
.user {
	width: 100%;
	padding: 0 4%;
	display: flex;
	align-items: center;
	// position: relative;
	background-color: #f23a3a;
	padding-bottom: 120upx;
	position: relative;
	.left {
		width: 16vw;
		height: 16vw;
		flex-shrink: 0;
		margin-right: 20upx;
		// border: solid 1upx #fff;
		border-radius: 100%;
		image {
			width: 16vw;
			height: 16vw;
			border-radius: 100%;
		}
	}
	.right {
		width: 35%;
		.username {
			font-size: 32upx;
			color: #fff;
		}
		.signature {
			color: #eee;
			font-size: 28upx;
		}
	}
	.moneys {
		display: flex;
		position: absolute;
		top: 30upx;
		right: 20upx;
		.left {
			text-align: center;
			border-radius: 0;
			margin-right: 20upx;
			min-width: 200upx;
			text-align: right;
			.p1 {
				font-size: 32upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
			.p2 {
				font-size: 24upx;
				font-family: Droid Sans Fallback;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}
		.right {
			width: 130upx;
			height: 56upx;
			line-height: 56upx;
			border: 2upx solid rgba(255, 255, 255, 1);
			border-radius: 28upx;
			font-size: 28upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}
	}
}
.order {
	width: 90%;
	margin: 30upx 4% 30upx 4%;
	padding: 30upx 4% 20upx 4%;
	background-color: #fff;
	box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
	border-radius: 15upx;
	z-index: 100;
	position: absolute;
	top: 180upx;
	left: 50%;
	height: 220upx;
	transform: translateX(-55%);
	overflow: hidden;
	.all_order {
		font-size: 24upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		text-align: right;
		transition: all 0.2s;
		image {
			width: 20upx;
			height: 25upx;
			transform: translateY(5upx);
			margin-left: 10upx;
		}
		&:active {
			transform: scaleY(1.2);
		}
	}
	.list {
		display: flex;
		padding-bottom: 10upx;
		margin-top: 20upx;
		.box {
			width: 20%;
			.img {
				width: 100%;
				display: flex;
				justify-content: center;
				position: relative;
				image {
					width: 80upx;
					height: 80upx;
					display: block;
				}
				.status_text{
					position: absolute;
					// display: inline-block;
					color: #F68684;
					border: 1rpx solid #F68684;
					// height: 30upx;
					// width: 30upx;
					top: 0upx;
					right: 10upx;
					font-size: 20upx;
					text-align: center;
					padding: 0 10upx;
					box-sizing: content-box;
					border-radius: 15upx;
				}
			}
			.text {
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 28upx;
				color: #3d3d3d;
			}
		}
	}
	.balance-info {
		display: flex;
		padding: 10upx 0;
		.left {
			width: 75%;
			display: flex;
			.box {
				width: 50%;
				font-size: 28upx;

				.num {
					width: 100%;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					color: #f9a453;
				}
				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					color: #3d3d3d;
					font-size: 28upx;
				}
			}
		}
		.right {
			border-left: solid 1upx #17e6a1;
			width: 25%;
			.box {
				.img {
					width: 100%;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					.icon {
						font-size: 45upx;
						color: #e78901;
					}
				}
				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #3d3d3d;
				}
			}
		}
	}
}
.youhui_cell {
	height: 80upx;
	line-height: 80upx;
	background: rgba(255, 255, 255, 1);
	padding: 0 4%;
	margin-top: 180upx;
	.img1 {
		width: 32upx;
		height: 24upx;
		float: left;
		margin-top: 8upx;
	}
	> text {
		float: left;
		font-size: 28upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		height: 40upx;
		line-height: 40upx;
		color: rgba(51, 51, 51, 1);
		margin-left: 10upx;
	}
	> p {
		float: right;
		overflow: hidden;
		height: 40upx;
		line-height: 40upx;
		transition: all 0.3s;
		width: 100upx;
		image {
			float: right;
			width: 20upx;
			height: 24upx;
			margin-top: 10upx;
			margin-right: 10upx;
			margin-left: 10upx;
		}
		text {
			font-size: 24upx;
			font-family: Droid Sans Fallback;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			float: left;
			margin-left: 30upx;
		}
		&:active {
			transform: scaleX(0.9);
		}
	}
}
.toolbar {
	width: 92%;
	margin: 0 4% 0 4%;
	padding: 0 0 20upx 0;
	background-color: #fff;
	box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
	border-radius: 15upx;
	.title {
		padding-top: 10upx;
		margin: 0 0 10upx 3%;
		height: 80upx;
		display: flex;
		align-items: center;
		font-size: 30upx;
		font-family: Droid Sans Fallback;
		font-weight: bold;
		color: rgba(28, 28, 28, 1);
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		.box {
			width: 25%;
			margin-bottom: 40upx;
			.img {
				width: 23vw;
				height: 45upx;
				display: flex;
				justify-content: center;
				image {
					width: 45upx;
					height: 45upx;
					display: block;
				}
			}
			.text {
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 26upx;
				color: #3d3d3d;
				margin-top: 10upx;
			}
		}
	}
}
.my_ewm {
	padding: 30upx;
	position: relative;
	.kuang {
		width: 275upx;
		height: 275upx;
		display: block;
		margin: 0 auto;
	}
	.ewm {
		width: 230upx;
		height: 230upx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -62%);
	}
	.ewm_title {
		font-size: 32upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		margin-top: 20upx;
	}
}
.fiex_Tel {
	width: 200upx;
	height: 70upx;
	position: fixed;
	right: 0;
	bottom: 36%;
	line-height: 70upx;
	background: rgba(242, 58, 58, 1);
	border-radius: 38upx 0px 0px 38upx;
	image {
		width: 30upx;
		height: 25upx;
		float: left;
		margin: 22upx;
		margin-right: 15upx;
	}
	text {
		font-size: 24upx;
		font-family: Droid Sans Fallback;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		float: left;
	}
}
.introduce {
	text-align: center;
	height: 45upx;
	line-height: 45upx;
	margin-top: 30upx;
	color: #999999;
	font-size: 24upx;
	.left,
	.right {
		margin: 0 20upx;
		color: #f2f2f2;
		line-height: 30upx;
		display: inline-block;
	}
	.name {
		font-weight: bold;
		margin-right: 5upx;
		text-decoration: underline;
	}
}
</style>
